<template>
    <div class="search container">
        <NavBar title="历史流程" rightIcon="bars" @rightIconClick="showCondition"></NavBar>
        <van-search
            v-model="keyword"
            show-action
            placeholder="请输入搜索关键词"
            @search="onSearch"
            >
            <template #action>
                <div @click.stop="onSearch">搜索</div>
            </template>
        </van-search>
        <div class="result-list">

        </div>
        <transition :name="conditionAnimation">
            <div class="condition-box" v-show="condition" @click.stop="conditionboxClick">
                <div class="condition-list">
                    <div class="condition-item">
                        <div class="title">流程类型</div>
                        <div class="text-item">
                            <span :class="{'selected':(orderType.includes(0))}" @click="orderTypeChanged(0)">全部</span>
                            <span :class="{'selected':(orderType.includes(1))}" @click="orderTypeChanged(1)">我发起的</span>
                            <span :class="{'selected':(orderType.includes(2))}" @click="orderTypeChanged(2)">抄送我的</span>
                            <span :class="{'selected':(orderType.includes(3))}" @click="orderTypeChanged(3)">我审批的</span>
                        </div>
                    </div>
                    <div class="operate-box">
                        <span class="reset" @click="reset">重置</span>
                        <span class="confirm" @click="onSearch">确认</span>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import {Toast} from 'vant';
import NavBar from '@/components/navbar';
export default {
    name: 'OA',
    components:{
        NavBar
    },
    data() {
        return { 
            keyword:'',
            condition:false,
            conditionAnimation:'',
            orderType:[0],
            orderStatus:[0],
            orderCreatedDateStart:'',
            ordercreatedDateEnd:'',
        }
    },
    mounted() {
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration:0
        });
        setTimeout(() => {
            Toast.clear();

        },1000);
        window.addEventListener('click',this.hideConditionBox);
    },
    destroyed() {
        window.removeEventListener('click',this.hideConditionBox)
    },
    methods:{
        hideConditionBox() {
            if(this.condition) {
                this.condition = false;
                this.conditionAnimation = 'slide-rightout';
            }
        },
        //阻止window.addEventListener('click')
        conditionboxClick() {
            
        },
        showCondition() {
            this.condition = !this.condition;
            if(this.condition) {
                this.conditionAnimation = 'slide-rightin';
            } else {
                this.conditionAnimation = 'slide-rightout';
            }
        },
        orderTypeChanged(index) {
            if(index === 0) {
                this.orderType = [0];
                return;
            }
            let orderType = this.orderType.filter((item)=>{
                return item !== 0;
            });
            if(orderType.includes(index)) {
                orderType = orderType.filter((item)=>{
                    return item !== index;
                })
                if(orderType.length <= 0) {
                    orderType = [0];
                }
            } else {
                orderType.push(index);
            }
            this.orderType = orderType;
        },
        reset() {
            this.orderType = [0];
        },
        onSearch() {
            Toast.loading({
                message: '加载中...',
                forbidClick: true,
                duration:0
            });
            setTimeout(() => {
                Toast.clear();

            },1000);
            if(this.condition) {
                this.condition = false;
                this.conditionAnimation = 'slide-rightout';
            }
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../css/var.less';
.search {
    .condition-box {
        position: fixed;
        top:40px;
        left:0;
        background:rgba(0,0,0,.1);
        margin-left:60px;
        box-sizing:border-box;
        .condition-list {
            background:#fff;
            padding:10px;
            box-sizing:border-box;
            .condition-item {
                .title {
                    font-size: 18px;
                }
                .text-item {
                    font-size:16px;
                    margin-top:20px;
                    display:flex;
                    flex-direction:row;
                    justify-content:flex-start;
                    align-items:center;
                    flex-wrap: wrap;
                    span {
                        display:inline-block;
                        background:#eee;
                        width:90px;
                        height: 40px;
                        line-height:40px;
                        text-align:center;
                        margin-right: 20px;
                        margin-bottom: 10px;
                        border-radius: 3px;
                    }
                    .selected {
                        color:#fff;
                        background:@color;
                    }
                }
            }
            .operate-box {
                margin-top:50px;
                display:flex;
                flex-direction:row;
                align-items:center;
                span { 
                    display:inline-block;
                    padding:10px 25px;
                    text-align:center;
                    margin-right:20px;
                    border-radius:3px;
                }
                .reset {
                    flex:1;
                    background:#eee;
                }
                .confirm {
                    flex:1;
                    background:@color;
                    color:#fff;
                }
            }
        }
    }
}
.van-search {
    margin-top: 40px;
}

.slide-rightin-enter {
  transform:translateX(100%);
}
.slide-rightin-enter-active {
  transition:transform .5s;
}
.slide-rightin-enter-to {
  transform:translateX(0);
}

.slide-rightout-leave {
  transform:translateX(0);
}
.slide-rightout-leave-active {
  transition:transform .5s;
}
.slide-rightout-leave-to {
  transform:translateX(100%);
}


</style>